<template>
  <div>
    <van-dropdown-menu ref="menuRef">
      <van-dropdown-item
        v-model="value"
        :options="options"
        @change="changeCondition"
      >
      </van-dropdown-item>
      <van-dropdown-item
        v-model="value1"
        :options="options2"
        @change="changeState"
      >
      </van-dropdown-item>
    </van-dropdown-menu>

    <!-- 重复内容 -->
    <van-list
      :immediate-check="false"
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <soundItem
        v-for="(item, index) in tracks"
        :item="item"
        :key="index"
      ></soundItem>
    </van-list>
    <bottom></bottom>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import soundItem from "./soundItem.vue";
import searchApi from "@/apis/search";
import bottom from '../Anchor/bottom.vue'
import type {
  DetailModel,
  AnyObject,
} from "@/apis/search";
let props = defineProps<{
  kw: string;
}>();
//声音列表数组
let tracks = ref<AnyObject[]>([]);
const loading = ref(false);
const finished = ref(false);

//触底事件
const onLoad = async () => {
  params.page++;
  await getSoundData();
  loading.value = false;
};

let params = reactive< DetailModel>({
  kw: props.kw,
  core: "all",
  page: 1,
  rows: 20,
  fq:{
    is_paid:undefined
  }
});

onMounted(() => {
  getSoundData();
});

//请求声音列表数据的函数

const getSoundData = async () => {
  try {
    let res = await searchApi.reqSearchDetail(params);
    if (res.ret == 0) {
      if (res.data.trackViews.tracks.length > 0) {
        if (res.data.trackViews.tracks.length < params.rows) {
          finished.value = true;
        }
      } else {
        //代表一定没有数据
        finished.value = true;
      }
      tracks.value.push(...res.data.trackViews.tracks);
    }
  } catch (error) {
    console.log(error);
  }
};

const menuRef = ref(null);
const value = ref(0);
const value1=ref(0);
const options = [
  { text: "相关度", value: 0, condition: "relation" },
  { text: "最多播放", value: 1, condition: "play" },
  { text: "最新上传", value: 2, condition: "recent" },
];
const options2 = [
  { text: "全部", value: 0, paidFilter: false },
  { text: "免费", value: 1, is_paid: false, paidFilter: true },
  { text: "付费", value: 2, is_paid: true, paidFilter: true },
];
const changeState = (value: number) => {  
  tracks.value = [];
  params.page = 1;
  if (value == 0) {
    params.paidFilter = options2[value].paidFilter;
  } else{
    params.fq={};
    params.fq.is_paid = options2[value].is_paid;
    params.paidFilter = options2[value].paidFilter;
  }
  getSoundData();
};

const changeCondition = (value: number) => {
  tracks.value = [];
  params.page = 1;
  params.condition = options[value].condition;
  getSoundData();
};
</script>

<style lang="less" scoped>
.center {
  text-align: center;
}
</style>
